<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">
    <script src="./echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="container1" style="height: 200px; width: 100%;"></div>
    <HR align=center width=100% color=#67C23A SIZE=2>
    <div id="container2" style="height: 200px; width: 100%"></div>
    <script type="text/javascript">
        // 模拟数据
        let base = +new Date(2022, 9, 19);
        let oneDay = 24 * 3600 * 1000;
        let date = [];
        let data1 = [];
        let data2 = [];
        let index = 1
        let now = new Date(base);
        for (let i = 1; i <= 270; i++) {
            if (index % 40 == 0) {
                now = new Date((base += oneDay));
                index = 0
            }
            date.push([now.getMonth(), now.getDate()].join('/'));
            data1.push((Math.random() * 80 + 50 + Math.random() * -10).toFixed(1));
            data2.push((Math.random() * 0.5 + 36.7 + Math.random() * -0.5).toFixed(2));
            index++;
        }
        console.log(date);
        console.log(data1);
        var dom1 = document.getElementById("container1");
        var dom2 = document.getElementById("container2");
        var myChart1 = echarts.init(dom1);
        var myChart2 = echarts.init(dom2);
        option1 = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                scale: true,
                min: "40",
                max: "200"
            },
            grid: {
                left: 30,
                right: 10,
                top: 10,
                bottom: 10
            },
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }
                        ])
                    },
                    data: data1
                }
            ]
        };
        option2 = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: date
            },
            yAxis: {
                type: 'value',
                scale: true,
                min: "36",
                max: "39"
            },
            grid: {
                left: 30,
                right: 10,
                top: 10,
                bottom: 10
            },
            series: {
                data: data2,
                type: "line",
                smooth: true,
                color: "#67C23A",
                name: "",
                markPoint: {
                    data: [
                        { type: "max", name: "最大值" },
                        { type: "min", name: "最小值" }
                    ]
                }
            }
        };
        myChart1.setOption(option1);
        myChart2.setOption(option2)
    </script>
</body>
</html>